<template>
    <div>
        <div class="conversation-list">
            <template v-for="item in msgList2">
                <el-row>
                    <el-col :span="24">
                        <el-card :class="{'right-text-align':item.userId === userId}">
                            <div slot="header" class="clearfix">
                                <span>用户【{{item.userId}}】</span>
                            </div>
                            <template v-for="msgElem in item.message">
                                <template v-if="msgElem.msgType === 'TEXT'">
                                    <el-tag>文本消息</el-tag>
                                    {{msgElem.msgContent.text}}
                                    <el-divider></el-divider>
                                </template>
                                <template v-if="msgElem.msgType === 'LOCATION'">
                                    <el-tag type="success">位置信息</el-tag>
                                    位置：{{msgElem.msgContent.desc}}<br>
                                    纬度：{{msgElem.msgContent.latitude}}<br>
                                    经度：{{msgElem.msgContent.longitude}}<br>
                                    <el-divider></el-divider>
                                </template>
                                <template v-if="msgElem.msgType === 'FACE'">
                                    <el-tag type="info">表情信息</el-tag>
                                    index：{{msgElem.msgContent.index}}<br>
                                    额外信息：{{msgElem.msgContent.data}}<br>
                                    <el-divider></el-divider>
                                </template>
                                <template v-if="msgElem.msgType === 'SOUND'">
                                    <el-tag type="warning">语音消息</el-tag>
                                    下载地址：{{msgElem.msgContent.url}}<br>
                                    字节：{{msgElem.msgContent.size}}<br>
                                    秒：{{msgElem.msgContent.second}}<br>
                                    下载方式：{{msgElem.msgContent.downloadFlag}}<br>
                                    <el-divider></el-divider>
                                </template>
                                <template v-if="msgElem.msgType === 'IMAGE'">
                                    <el-tag type="danger">图像消息</el-tag>
                                    图片序列号：{{msgElem.msgContent.uuid}}<br>
                                    图片格式：{{msgElem.msgContent.imageFormat}}<br>
                                    原图URL:{{msgElem.msgContent.imageInfoArray[0].url}}<br>
                                    原图高度:{{msgElem.msgContent.imageInfoArray[0].height}}<br>
                                    原图宽度:{{msgElem.msgContent.imageInfoArray[0].width}}<br>
                                    原图大小:{{msgElem.msgContent.imageInfoArray[0].size}}<br>
                                    <el-divider></el-divider>
                                </template>
                                <template v-if="msgElem.msgType === 'FILE'">
                                    <el-tag type="info">文件消息</el-tag>
                                    下载地址：{{msgElem.msgContent.url}}<br>
                                    数据大小：{{msgElem.msgContent.fileSize}}<br>
                                    文件名称：{{msgElem.msgContent.fileName}}<br>
                                    下载方式：{{msgElem.msgContent.downloadFlag}}<br>
                                    <el-divider></el-divider>
                                </template>
                                <template v-if="msgElem.msgType === 'VIDEO'">
                                    <el-tag type="danger">视频消息</el-tag>
                                    下载地址：{{msgElem.msgContent.videoUrl}}<br>
                                    数据大小：{{msgElem.msgContent.videoSize}}<br>
                                    视频时长：{{msgElem.msgContent.videoSecond}}<br>
                                    视频格式：{{msgElem.msgContent.videoFormat}}<br>
                                    下载方式：{{msgElem.msgContent.videoDownloadFlag}}<br>
                                    <el-divider></el-divider>
                                </template>
                            </template>
                        </el-card>
                    </el-col>
                </el-row>
            </template>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from "vuex";

    export default {
        name: "msg-content",
        props: {
            msgList: {
                type: Array
            }
        },
        computed:{
            ...mapGetters(['userId'])
        },
        data() {
            return {
                msgList2: this.msgList
            }
        },
        watch: {
            msgList: {
                handler: function (newValue, oldValue) {
                    // 滚动条到底部
                    this.$nextTick(() => {
                        let container = this.$el.querySelector(".conversation-list");
                        container.scrollTop = container.scrollHeight;
                    });
                },
                immediate: true,
                deep: true
            }
        },
        methods: {},
        mounted() {

        }
    }
</script>

<style scoped>
    .conversation-list {
        min-height: 500px;
        height: 500px;
        overflow: auto;
    }

    .right-text-align {
        text-align: right;
    }
</style>